<template>
  <div class="star-main">
    <div class="star-main-head">
      <p>开启服务</p>
    </div>
    <el-form
      label-position="right"
      label-width="100px"
      :model="formLabelAlign"
      style="max-width: 460px"
      :rules="rules"
    >
      <el-form-item label="串口端号：">
        <el-input-number
          :min="0"
          :max="9"
          v-model="formLabelAlign.serial_port"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="IP地址：">
        <el-input
          v-model="ip1"
          class="ip-input"
          maxlength="3"
          onkeyup="value=value.replace(/[^\d]/g,'')"
          @input="(val) => checkVal(val, 'ip1')"
          @blur="connectVal"
        ></el-input>
        <div class="ip-input-div"></div>
        <el-input
          v-model="ip2"
          class="ip-input"
          maxlength="3"
          onkeyup="value=value.replace(/[^\d]/g,'')"
          @input="(val) => checkVal(val, 'ip2')"
          @blur="connectVal"
        ></el-input>
        <div class="ip-input-div"></div>
        <el-input
          v-model="ip3"
          class="ip-input"
          maxlength="3"
          onkeyup="value=value.replace(/[^\d]/g,'')"
          @input="(val) => checkVal(val, 'ip3')"
          @blur="connectVal"
        ></el-input>
        <div class="ip-input-div"></div>
        <el-input
          v-model="ip4"
          class="ip-input"
          maxlength="3"
          onkeyup="value=value.replace(/[^\d]/g,'')"
          @input="(val) => checkVal(val, 'ip4')"
          @blur="connectVal"
        ></el-input>
      </el-form-item>
      <el-form-item label="网络端口：">
        <el-input v-model="formLabelAlign.net_port"></el-input>
      </el-form-item>
    </el-form>
    <div class="star-main-footer">
      <el-button type="primary" @click="onSubmit" style="margin-left:100px;">提交</el-button>
    </div>
  </div>
    <el-button type="primary" style="margin-left: 240px" @click="step"
    >下一步
  </el-button>
</template>

<script>
import { reactive, ref } from "vue";
import request from "@/http/request";
import { ElNotification,ElMessage  } from "element-plus";
import store from "../../store";
import {useRouter} from "vue-router";
export default {
  
  setup(props) {
    const userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    const formLabelAlign = reactive({
      serial_port: 0,
      ip: "",
      net_port: "",
      user_id:userInfo.user_id
    });
    let ip1 = ref();
    let ip2 = ref();
    let ip3 = ref();
    let ip4 = ref();
    const connectVal = () => {
      if (ip1.value && ip2.value && ip3.value && ip4.value) {
        formLabelAlign.ip =
          ip1.value + "." + ip2.value + "." + ip3.value + "." + ip4.value;
      }
    };
    const checkVal = (val, key) => {
      if (Number(val) <= 255 && Number(val) >= 0) {
        // console.log(val);
      } else {
        switch (key) {
          case "ip1":
            if (Number(val) > 255) {
              ip1.value = 255;
            } else {
              ip1.value = 0;
            }
            break;
          case "ip2":
            if (Number(val) > 255) {
              ip2.value = 255;
            } else {
              ip2.value = 0;
            }
            break;
          case "ip3":
            if (Number(val) > 255) {
              ip3.value = 255;
            } else {
              ip3.value = 0;
            }
            break;
          case "ip4":
            if (Number(val) > 255) {
              ip4.value = 255;
            } else {
              ip4.value = 0;
            }
            break;
        }
      }
    };
    const onSubmit = async () => {
      // 发送请求
      console.log(formLabelAlign);
      // console.log(request.starServe);
      formLabelAlign.serial_port = Number(formLabelAlign.serial_port)
      const { data } = await request.starServe(formLabelAlign);
      // console.log(data);
      if (data.code === 0) {
        ElNotification({
          title: "消息提示",
          message: data.message,
          position: "bottom-right",
        });
      }else{
        ElMessage.error(data.message)
      }
    };
    // 表格校验
    const rules = reactive({
      centerSerialNumber: [
        {
          required: true,
          message: "请输入中心序列号",
          trigger: "blur",
        },
        {
          min: 8,
          max: 32,
          message: "长度在8-32位之间",
        },
      ],
      serialNumber: [
        {
          required: true,
          message: "请输入发卡序列号",
          trigger: "blur",
        },
        {
          min: 8,
          max: 32,
          message: "长度在8-32位之间",
        },
      ],
    });
     const router=useRouter();
     const step = () => {
       router.push("/home/tabs/initial")
      store.commit("CHANGE", false);
    };
    return {
      formLabelAlign,
      ip1,
      ip2,
      ip3,
      ip4,
      connectVal,
      checkVal,
      rules,
      onSubmit,
      step
    };
  },
};
</script>

<style scoped lang='scss'>
.ip-input {
  width: 21%;
  outline: none;
}
.ip-input-div {
  border: 1px solid black;
  margin: 7px;
}
.star-main {
  border: 1px solid #dddddd;
  width: 100%;
  width: 600px;
  margin: 30px;
  border-radius: 10px;
  .star-main-head {
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
    margin-bottom: 30px;
    border-radius: 10px 10px 0 0;
    p {
      line-height: 60px;
      text-align: left;
      margin-left: 20px;
    }
  }
  .star-main-footer {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f5f5f5;
    margin-top: 30px;
    border-radius: 0px 0px 10px 10px;
    button {
      background-color: #428bca;
    }
  }
}
</style>